<template lang="">
  <view class="ly-tabbar">
    <view class="tabbar" :class="{close : !isShowTab}">
      <!-- 左侧展开按钮 -->
      <view class="left-array">
        <u-icon v-if="!isShowTab" size="50rpx" name="arrow-right" @click="showTab"></u-icon>
      </view>
      <u-tabbar 
        :value="value"
	      :fixed="false"
	      :placeholder="false"
	      :safeAreaInsetBottom="false"
        :border="false"
      >
        <block v-for="(item, index) in tabbar" :key="index">
          <u-tabbar-item :icon="item.name==value?item.selectedIconPath:item.iconPath" @click="change(item)" :name="item.name"></u-tabbar-item>
        </block>
      </u-tabbar>
      <!-- 右侧关闭按钮 -->
      <view class="right-array">
        <u-icon v-if="isShowTab" size="50rpx" name="arrow-left" @click="closeTab"></u-icon>
      </view>
    </view> 
  </view>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  data() {
    return {
      isShowTab: true
    }
  }, 
  computed: {
    ...mapGetters(['tabbar', 'value'])
  },
  methods: {
    change(item) {
      this.changeActiveVal({name: item.name})
      console.log(this.value);
      uni.switchTab({
         url: item.pagePath
      })
    },
    // 展开 关闭 
    showTab() {
      this.isShowTab = true
    },
    closeTab() {
      this.isShowTab = false
    },
    ...mapMutations(['changeActiveVal'])
  },
}
</script>
<style lang="scss">
  .ly-tabbar {
    position: fixed;
    bottom: 100rpx;
    width: 100wh;
    height: 160rpx;
    padding: 0 18rpx;
    .tabbar {
      padding: 0 12rpx;
      height: 100%;
      width: 100%;
      border-radius: 80rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      background-color: #ffffff;
      overflow: hidden;
      transition: height 1s;
      .right-array .left-array{
        width: 100rpx;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
    .close {
      max-width: 70rpx !important;
    }
  }
</style>